$(function(){
	var MVC = MVC || {};
	MVC.model = function(){
		var M = {};
		M.data = {
			slideBar : [
				{
					text : '萌妹子',
					icon : 'left_meng.png',
					title : '喵耳萝莉的千本樱',
					content : '自古幼女有三好',
					img : 'left_meng_img.png',
					href : 'http://moe.hao123.com'
				},
				{
					text : '动漫',
					icon : 'left_meng.png',
					title : '喵耳萝莉的千本樱',
					content : '自古幼女有三好',
					img : 'left_meng_img.png',
					href : 'http://moe.hao123.com'
				},
				{
					text : 'lol直播',
					icon : 'left_meng.png',
					title : '喵耳萝莉的千本樱',
					content : '自古幼女有三好',
					img : 'left_meng_img.png',
					href : 'http://moe.hao123.com'
				},
				{
					text : '网络剧',
					icon : 'left_meng.png',
					title : '喵耳萝莉的千本樱',
					content : '自古幼女有三好',
					img : 'left_meng_img.png',
					href : 'http://moe.hao123.com'
				},
				{
					text : '热帖',
					icon : 'left_meng.png',
					title : '喵耳萝莉的千本樱',
					content : '自古幼女有三好',
					img : 'left_meng_img.png',
					href : 'http://moe.hao123.com'
				}
			]
		};
		M.conf = {
			slideBarCloseAnimate : false,
		};
		return {
			getData : function(m){
				return M.data[m];
			},
			getCong : function(c){
				return M.conf[c];
			},
			setData : function(m, v){
				M.data[m] = v;
				return this;
			},
			setConf : function(c, v){
				M.conf[c] = v;
				return this;
			}
		}
	}();
	MVC.view = function(){
		var M = MVC.model;
		var V = {
			createSlideBar : function(){
				var html = '',
				data = M.getData('slideBar');
				if(!data || !data.length){
					return;
				}
				var dom = $.create('div', {
					'class' : 'slideBar',
					'id' : 'slideBar'
				});
				var tpl = {
					container : [
						'<div class="slideBar-inner"><ul>{#content#}</ul></div>',
						'<a hidefocus href="#" class="slideBar-close" title="收起"/>',
					].join(''),
					item : [
					'<li>',
						'<a class="icon" href="{#href#}">',
							'<img src="common/img/{#icon#}">',
							'<span>{#text#}</span>',
							'</a>',
							'<div class="box">',
								'<div>',
									'<a class="title" href="{#href#}">{#title#}</a>',
									'<a href="{#href#}">{#title#}</a>',
								'</div>',
								'<a clss="image" href={#href#}><img src="common/img/{#img#}"></a>',
								'</div>',
							'</li>'
					].join('')
				};
				for(var i = 0, len = data.length; i < len; i++){
					html += $.formataString(tpl.item, data[i]);
				}
				dom.html(
					$.formataString(tpl.container, {content : html})
					)
					.appendTo('body');
			}
		}
		return function(v){
			v[v]();
		}
	}();
	MVC.ctrl = function(){
		var M = MVC.model;
		var V = MVC.view;
		var C = {
			initSlideBar : function(){
				V('createSlideBar');
				$('li', 'slidebar')
				.on('mouseout', function(e){
					$(this).addClass('show');
				})
				.on('mouseout', function(e){
					$(this).removeClass('show');
				});
				$('.slidebar-close', 'slidebar')
				.on('click', function(e){
					if(M.getConf('slideBarCloseAnimate')){
						return false;
					}
					M.setConf('slideBarCloseAnimate', true);
					var $this = $(this);
					if($this.hasClass('is-close')){
						$('.slidebar-inner', 'slidebar')
						.animate({
							duration : 800,
							type : 'easeOurQuart',
							main : function(dom){
								dom.css('left', -50 + this.tween * 50 + 'px');
							},
							end : function(){
								$this.removeClass('is-close');
								M.setConf('slideBarCloseAnimate', false);
							}
						});
					}
				})
			}()
		};
		for(var i in C){
			C[i] && C[i]();
		}
	}();
});